<template>
  <div>
    <div ref="echarts" style="width: 600px; height: 400px;"></div>
    <button type="button" @click="testMock">点击</button>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import axios from 'axios'
export default {
  name: 'EChartsComponent',
  data () {
    return {
      myChart: undefined
    }
  },
  mounted () {
    this.myChart = echarts.init(this.$refs.echarts)
    this.myChart.setOption({
      title: {
        // 主标题
        text: "提示框"
      },
      legend: {
        show: true
      },
      tooltip: {
        // 是否永远显示提示框内容，默认情况下在移出可触发提示框区域后 一定时间 后隐藏
        alwaysShowContent: false,
        // 怎么来触发提示框,mousemove, click,
        triggerOn: "mousemove",
        // 提示框浮层位置
        position: function (pt) {
          return [pt[0], 130]
        },
        // 格式化提示框文本
        // formatter: '{a} <br/>{b} : {c}',
        // formatter: function (params) {
        //   console.log(params)
        //   params = params[0]
        //   // var date = new Date(params.name);
        //   return (params.axisValue + '/' + params.data + ' : ')
        // },
        show: true,
        // 'axis'坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
        // 'item'数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
        trigger: "axis",
        // 坐标轴显示
        axisPointer: {
          type: "cross", // 'line' 直线指示器,'shadow' 阴影指示器, 'cross' 十字准星指示器。
          // 坐标轴提示框label配置
          label: {
            color: "rgba(0, 0, 0, 1)",
            width: 120,
            height: 21,
          },
          shadowStyle: {
            color: "rgba(250, 250, 250, 1)"
          },
          crossStyle: {
            color: "rgba(0, 0, 0, 1)"
          },
        },
        // 主提示框label配置
        textStyle: {
          color: "rgba(0, 0, 0, 1)",
          fontStyle: "normal",
          fontWeight: "normal",
          fontSize: 15,
          lineHeight: 18,
          width: 120
        },
      },
      xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
      },
      yAxis: {},
      series: [
        {
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        },
        {
          name: '储量',
          type: 'bar',
          data: [15, 120, 136, 110, 110, 120]
        }
      ]
    })
  },
  methods: {
    testMock () {
      axios.get('/mock/echarts1').then(response => {
        this.myChart.setOption({
          series: [
            {
              name: '储量',
              type: 'line',
              data: response.data.data.items
            }
          ]
        })
        console.log('response', response.data.data.items)
      })
    }
  }
}
</script>
<style lang="scss" scoped></style>
